<template>
	<div class="app-container">
		<div class="wx-user-box" style="padding: 0 20px;">
			<div class="wx-user-title">门禁设备</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="设备ID">
						<el-input @change="search" clearable v-model="formInline.device_id" placeholder="请输入">
						</el-input>
					</el-form-item>
					<el-form-item label="设备名称">
						<el-input @change="search" clearable v-model="formInline.device_name" placeholder="请输入">
						</el-input>
					</el-form-item>
					<el-form-item label="设备状态">
						<el-select v-model="formInline.state" placeholder="请选择" clearable @change="search">
							<el-option label="在线" :value="1"></el-option>
							<el-option label="离线" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="启用状态">
						<el-select v-model="formInline.on_state" placeholder="请选择" clearable
							@change="search">
							<el-option label="启用" :value="1"></el-option>
							<el-option label="禁用" :value="0"></el-option>
						</el-select>
					</el-form-item> -->
					<!-- <el-form-item label="小区">
						<el-select v-model="formInline.xiaoqu_id" filterable placeholder="请选择" clearable
							@change="search">
							<el-option :label="item.xq_name" :value="item.id" v-for="(item, index) in xiaoqus"
								:key="index">
							</el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="代理商">
						<el-select v-model="formInline.agent_id" filterable placeholder="请选择" clearable
							@change="search">
							<el-option :label="item.agent_name" :value="item.agent_id"
								v-for="(item, index) in agentList" :key="index">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
						<el-button type="success" @click="openAdd()" icon="el-icon-circle-plus-outline">添加设备</el-button>
					</el-form-item>
				</el-form>

				<!-- 列表 -->
				<el-table :data="list" style="width: 100%;">
					<el-table-column prop="device_id" label="设备ID">
						<template slot-scope="scope">
							{{scope.row.device_id||''}}
						</template>
					</el-table-column>
					<el-table-column prop="device_name" label="设备名称" />
					<el-table-column label="设备状态">
						<template slot-scope="scope">
							<el-tag size="mini" type="success" v-if="scope.row.state==1">在线</el-tag>
							<el-tag size="mini" type="info" v-else>离线</el-tag>
						</template>
					</el-table-column>
					<!-- <el-table-column label="启用状态">
						<template slot-scope="scope">
							<el-tag size="mini" v-if="scope.row.on_state">启用</el-tag>
							<el-tag size="mini" type="danger" v-else>禁用</el-tag>
						</template>
					</el-table-column> -->
					<el-table-column prop="xq_name" label="所在小区" />
					<el-table-column prop="agent_name" label="代理商" />
					<el-table-column prop="createtime" label="创建时间" />
					<el-table-column label="操作" min-width="130px">
						<template slot-scope="scope">
							<el-button size="mini" @click="setItem(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="del(scope.row.device_id)">删除</el-button>
							<el-button type="primary" size="mini" v-if="scope.row.isUpdate"
								@click="upDevice(scope.row.device_id)">更新</el-button>
							<el-button type="danger" size="mini" v-if="scope.row.isUpdate"
								@click="restartApp(scope.row.device_id)">重启</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页 -->
				<div class="page-block" style="margin-top: 20px;">
					<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalRow" :pager-count="pageCount"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>

			</div>
		</div>

		<el-dialog :title="form.old_id ? '编辑设备':'添加设备'" :visible.sync="dialogVisible" width="500px" center
			@close="reset('form')">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="设备品牌" prop="gate_make">
					<el-select v-model="form.gate_make" filterable placeholder="请选择设备品牌" @change="accessModelQuery()" style="width: 280px;" clearable>
						<el-option :label="item.make_name" :value="item.id" v-for="(item, index) in makeList"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="类型型号" prop="gate_model">
					<el-select v-model="form.gate_model" filterable placeholder="请选择类型型号" style="width: 280px;" clearable>
						<el-option :label="item.model_name" :value="item.id" v-for="(item, index) in modelList"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="设备ID" prop="device_id">
					<el-input :disabled="form.old_id?true:false" placeholder="请输入" style="width:280px;"
						v-model="form.device_id"></el-input>
				</el-form-item>
				<el-form-item label="设备名称" prop="device_name">
					<el-input style="width:280px;" placeholder="请输入" v-model="form.device_name"></el-input>
				</el-form-item>
				<el-form-item label="代理商名称" prop="agent_id">
					<el-select v-model="form.agent_id" filterable placeholder="请选择" style="width: 280px;" clearable>
						<el-option :label="item.agent_name" :value="item.agent_id" v-for="(item, index) in agentList"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset('form')">取 消</el-button>
				<el-button type="primary" @click="saveOrUpdate('form')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import Api from '@/api/pages/entrance-guard/index.js';
import accesApi from '@/api/pages/entrance-guard/index.js';

export default {
	name: 'deviceList',
	data() {
		return {
			dialogVisible: false,
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 50], // 个数选择器
			currentPage: 1, // 当前页码
			totalRow: 0,
			formInline: {
				device_name: '',
				device_id: '',
				state: '',
				agent_id: '',
				xiaoqu_id: '',
				on_state: '',
				gate_type:'2',
			},
			form: {},
			rules: {
				gate_make: [{
					required: true,
					message: '请选择设备品牌',
					trigger: 'change'
				}],
				gate_model: [{
					required: true,
					message: '请选择类型型号',
					trigger: 'change'
				}],
				
				device_id: [{
					required: true,
					message: '请输入设备ID',
					trigger: 'change'
				}],
				device_name: [{
					required: true,
					message: '请输入设备名称',
					trigger: 'change'
				}],
			
			},
			list: [],
			page: 1,
			size: 10,
			states: false,
			mult: [],
			agentList: [],
			xiaoqus: [],
			makeList:[],
			modelList:[],
		};
	},
	mounted() {
		this.getData();
		this.getLoadXiaoQuList();
		this.getList();
		this.accessMakeQuery();
	},
	methods: {
		accessMakeQuery() {
			accesApi.accessMakeQuery({
				pageNumber: 1,
				pageSize: 1000,
			}, false).then(res => {
				if (res.state) {
					this.makeList = res.data.list||[];
				}
			});
		},
		accessModelQuery() {
			this.form.gate_model='';
			accesApi.accessModelQuery({
				pageNumber: 1,
				pageSize: 1000,
				make_id:this.form.gate_make,
			}, false).then(res => {
				if (res.state) {
					this.modelList = res.data.list||[];
				}
			})
		},

		//小区获取
		getLoadXiaoQuList() {
			Api.loadAllXiaoQu().then(res => {
				if (res.state) {
					this.xiaoqus = res.data;
				}
			})
		},

		// 获取代理商
		getList() {
			Api.getAllAgent({}, false).then(res => {
				if (res.state) {
					this.agentList = res.data;
				}
			})
		},

		// 更新
		upDevice(id) {
			this.$confirm('是否更新?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				Api.upDevice({
					driviceId: id
				}).then(res => {
					if (res.state) {
						this.$message({
							message: res.msg,
							type: "success"
						});
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				});
			}).catch(() => { });
		},

		// 重启app
		restartApp(id) {
			this.$confirm('是否重启?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				Api.restartApp({
					deviceId: id
				}).then(res => {
					if (res.state) {
						this.$message({
							message: res.msg,
							type: "success"
						});
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				});
			}).catch(() => { });
		},

		handleSizeChange(val) {
			this.size = val;
			this.page = 1;
			this.getData();
		},
		handleCurrentChange(val) {
			this.page = val;
			this.getData();
		},

		// 查询
		search() {
			this.page = 1;
			this.getData();
		},

		// 列表选择
		handleSelectionChange(val) {
			this.mult = val;
			// console.log(val)
		},

		// 获取数据
		getData() {
			let data = {
				pageNumber: this.page,
				pageSize: this.size,
				device_id: this.formInline.device_id,
				device_name: this.formInline.device_name,
				agent_id: this.formInline.agent_id,
				state: this.formInline.state,
				on_state: this.formInline.on_state,
				xiaoqu_id: this.formInline.xiaoqu_id
			};
			Api.deviceQuery(data).then(res => {
				if (res.state) {
					this.list = res.data.list;
					this.totalRow = res.data.totalRow;
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 删除
		del(id) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				Api.deviceDel({
					deviceId: id
				}).then(res => {
					if (res.state) {
						this.$message({
							message: res.msg,
							type: "success"
						});
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				});
			}).catch(() => { });
		},

		// 编辑
		setItem(item) {
			this.form = {
				old_id: item.device_id,
				device_id: item.device_id,
				device_name: item.device_name,
				on_state: item.on_state,
				agent_id: item.agent_id,
				gate_make: item.gate_make,
				gate_model: item.gate_model,
			};
			// console.log(this.form)
			this.dialogVisible = true;
		},

		// 添加
		openAdd() {
			this.initData();
			this.dialogVisible = true;
		},

		reset(formName) {
			this.initData();
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
		},

		// 初始化数据
		initData() {
			this.form = {
				old_id: '',
				device_id: '',
				device_name: '',
				on_state: true,
				agent_id: '',
				gate_model:'',
				gate_make:'',
			};
		},

		// 保存与修改
		saveOrUpdate(formName, type) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					let datas = {
						'deviceId': this.form.device_id,
						'deviceName': this.form.device_name,
						'onState': this.form.on_state,
						'agent_id': this.form.agent_id,
						'gate_model':this.form.gate_model,
						'gate_make':this.form.gate_make,
					}
					if (this.form.old_id) {
						datas['oldId'] = this.form.old_id
						this.Update(datas)
					} else {
						this.save(datas)
					}
					// console.log(datas)
				}
			});
		},

		save(datas) {
			Api.deviceSave(datas).then((res) => {
				this.callback(res);
			});
		},

		Update(datas) {
			Api.deviceUpdate(datas).then((res) => {
				this.callback(res);
			});
		},

		callback(res) {
			if (res.state) {
				this.$message({
					message: res.msg,
					type: "success"
				});
				this.getData();
				this.reset('form');
			} else {
				this.$message.error(res.msg);
			}
		},

	}
};
</script>

<style lang="scss" scoped>
.page-block {
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-groups {
	.fl {
		display: block;
		margin-left: 0px !important;
		margin-top: 10px;
	}

	.fl:first-child {
		margin-top: 0;
	}
}
</style>
<style lang="scss">
.el-popover {
	min-width: 80px !important;
}
</style>
